<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        height {
            height: 100%;
        }

        #template {
            display: none;
        }

        #popupshow {
            margin-top: 20px;
            margin-right: 20px;
            float: right;
        }

        .mask {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 155, 155, .5);
            position: fixed;
            left: 0;
            top: 0;
            display: none;
        }

        .popup {
            width: 400px;
            border-radius: 20px;
            padding: 20px;
            position: fixed;
            z-index: 3;
            left: 50%;
            top: 50%;
            background-color: white;
            transform: translate(-50%, -50%);
            display: none;
        }

        .del {
            width: 200px;
            height: 200px;
            background-color: coral;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 4;
            transform: translate(-50%, -50%);
            line-height: 200px;
            text-align: center;
            display: none;
        }

        #close {
            position: absolute;
            top: 5px;
            right: 15px;
            color: #999;
            font-size: 24px;
            cursor: pointer;
            transition: all .5s;
        }

        #close:hover {
            color: crimson;
            transform: scale(1.2);
        }

        #province,
        #city,
        #area {
            width: 100px;
        }
    </style>
</head>

<body>
    <button class="btn btn-success" id="popupshow">+添加学员</button>

    <div class="popup">
        <span id="close"> × </span>
        <div class="form-group">
            <label for="newName">姓名</label>
            <input type="email" class="form-control" id="newName" placeholder="请输入学生姓名">
        </div>
        <div class="form-group">
            <label for="newAge">年龄</label>
            <input type="email" class="form-control" id="newAge" placeholder="请输入学生年龄">
        </div>
        <div class="form-group">
            <label for="newCity">城市</label>
            <select name="" id="province"></select>
            <select name="" id="city"></select>
            <select name="" id="area"></select>
        </div>
        <div class="form-group">
            <label class="radio-inline">
                <input type="radio" name="sex" id="boy" value="option1" checked> 男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" id="girl" value="option2"> 女
            </label>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-info" id="send">确认添加</button>
            <button class="btn btn-success" id="nono">取消</button>
        </div>
        </form>
    </div>
    <div class="mask"></div>
    <div class="del">
        <button class="btn btn-danger yes">确认删除</button>
        <button class="btn btn-info no">取消</button>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>所在城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr id="template">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button class="btn btn-danger delete">删除学员</button>
                    <button class="btn btn-primary edit">修改信息</button>
                </td>
            </tr>
        </tbody>
    </table>
    <script src="../../jquery.min.js"></script>
    <script src="citys.js"></script>
    <script>
        // 获取数据库数据写入页面
        $.ajax({
            url: "http://10.35.165.39:80/getlist",
            success(data) {
                var data = JSON.parse(data)
                data.forEach(item => {
                    let newTr = $("#template").clone(true)
                    newTr.attr("id", "")
                    // console.log(item)
                    newTr.find("td").eq(0).html(item.id)
                    newTr.find("td").eq(1).html(item.name)
                    newTr.find("td").eq(2).html(Number(item.sex) ? "男" : "女")
                    newTr.find("td").eq(3).html(item.age)
                    newTr.find("td").eq(4).html(item.city)
                    $("tbody").append(newTr)
                })
            }
        })

        // 删除事件
        $(".delete").click(function () {
            $(".mask").fadeIn()
            $(".del").fadeIn()
            let id = $(this).closest("tr").find("td").eq(0).html()
            // 确认事件
            $(".yes").click(function () {
                $(".mask").fadeOut()
                $(".del").fadeOut()
                $.ajax({
                    url: "http://10.35.165.39:80/delete",
                    data: {
                        id: id
                    },
                    success(data) {
                        console.log(data)
                        if (data === "success") {
                            history.go(0)
                        } else {
                            alert("删除操作失败!")
                        }
                    }
                })
            })
        })
        // 取消事件
        $(".no").click(function () {
            $(".mask").fadeOut()
            $(".del").fadeOut()
        })

        // 初始化城市 
        //省，市，区
        let province = $("#province")
        let city = $("#city")
        let area = $("#area")
        citys.forEach(item => {
            let option = $(`<option>${item.provinceName}</option>`)
            province.append(option)
        })
        // 选完省触发市事件
        province.change(function () {
            city.html("")
            area.html("")
            // this.selectedIndex 获取当前下标
            cityList = citys[this.selectedIndex].mallCityList
            cityList.forEach(item => {
                let option = $(`<option>${item.cityName}</option>`)
                city.append(option)
            })
            // 更新区的内容
            cityList[0].mallAreaList.forEach(item => {
                let option = $(`<option>${item.areaName}</option>`)
                area.append(option)
            })
        })
        // 选完市触发省事件
        city.change(function () {
            area.html("")
            let areaList = cityList[this.selectedIndex].mallAreaList
            areaList.forEach(item => {
                let option = $(`<option>${item.areaName}</option>`)
                area.append(option)
            })
        })
        // 初始添加事件
        $("#popupshow").click(function () {
            $(".mask").fadeIn()
            $(".popup").fadeIn()
            $("#send").html("确认删除")
            // 确认添加事件()
            $("#send").click(function () {
                $.ajax({
                    url: `http://10.35.165.39/add`,
                    data: {
                        name: $("#newName").val(),
                        age: $("#newAge").val(),
                        city: province.val() + city.val() + area.val(),
                        sex: $("#girl")[0].chacked ? 1 : 0
                    },
                    success(data) {
                        if (data === "success") {
                            alert("添加成功")
                            history.go(0)
                        } else {
                            alert("添加失败")
                        }
                    }
                })
            })
        })
        // x事件
        $("#close").click(function () {
            $(".mask").fadeOut()
            $(".popup").fadeOut()
        })
        // 取消事件
        $("#nono").click(function () {
            $(".mask").fadeOut()
            $(".popup").fadeOut()
        })


        // 修改事件
        $(".edit").click(function () {
            $(".mask").fadeIn()
            $(".popup").fadeIn()
            $("#send").html("确认修改")
            let id = $(this).closest("tr").find("td").eq(0).html()
            let name = $(this).closest("tr").find("td").eq(1).html()
            let sex = $(this).closest("tr").find("td").eq(2).html()
            let age = $(this).closest("tr").find("td").eq(3).html()
            $("#newName").val(name)
            $("#newAge").val(age)

            $("#send").click(function () {
                $.ajax({
                    url: `http://10.35.165.39/change`,
                    data: {
                        id: id,
                        name: $("#newName").val(),
                        age: $("#newAge").val(),
                        city: province.val() + city.val() + area.val(),
                        sex: $("#girl")[0].chacked ? 1 : 0
                    },
                    success(data) {
                        if (data === "success") {
                            alert("修改成功")
                            history.go(0)
                        } else {
                            alert("修改失败")
                        }
                    }
                })
            })
        })
    </script>
</body>

</html>